<!-- 学历组件的封装 -->
<template>
  <el-select v-model="currentValue" placeholder="请选择学历" :popper-append-to-body="false">
    <el-option v-for="item in optionList" :label="item.name" :value="item.val" :key="item.val"></el-option>
  </el-select>
  <!-- 父组件调用 -->
  <!-- <XLSelect :value="query.education" @parentEvent="getXLChild" ref="XLDome"></XLSelect> -->
</template>
<script>
import { education } from '../../../api/jobList.js'
export default {
  name: 'xl-select',
  // 组件 v-model 值通过 props 传入，必须定义为 value
  props: {
    value: {
      type: [String, Number]
    }
  },
  data () {
    return {
      optionList: [],
      // 将传入的 value 在 data 中重新定义赋值，以便子组件改变值（子组件中不能直接修改 props 中的值）
      currentValue: this.value
    }
  },
  mounted () {
    this.getOptionList();
  },
  // 监听 value：使 value 能在初始化时有值，监听 data（currentValue）：使子组件修改值通知给父组件同步（重要）
  watch: {
    value (newVal) {
      if (newVal) {
        this.currentValue = newVal
      }
    },
    currentValue (newVal, oldVal) {
      if (newVal !== oldVal) {
        // 子组件通过$emit 给父组件派发事件
        this.$emit('parentEvent', this.currentValue)
      }
    }
  },
  methods: {
    /**
  * 获取学历信息
  */
    getOptionList () {
      education().then(res => {
        if (res.success) {
          this.optionList = res.data || []
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    /**
   * 清空内容
   */
    clearContent () {
      this.currentValue = '';
    }
  }
}
</script>  